<template>
  <div id="approveconfirmcomp">
    <vxe-modal :title="`留样盒信息`" width="85vw" height="88vh" v-model="dialogFormVisible" draggable show-footer mask-closable :mask="false">
      <template #title>
        <span class="margin-right">当前选中:</span><span class="text-blue">{{dataForm.stoPidName}}</span>/<span class="text-green">{{dataForm.stoName}}</span>/<span class="text-orange">{{dataForm.fridge}}</span>/<span class="text-olive">{{dataForm.layer}}</span>/<span class="text-pink">{{dataForm.specbox}}</span>
      </template>
      <template #default>
        <Splitpanes>
          <Pane size="55">
            <vxe-toolbar class-name="bg-grey light">
              <template #buttons>
                <span class="text-bold text-shadow margin-right-xs">条码号:</span>
                <vxe-input v-model="formData.reqNo" placeholder="条码号"></vxe-input>
                <span class="margin-left-xs">在此扫码入库</span>
              </template>
            </vxe-toolbar>
            <div class="sample-box">
              <div class="rack">
                <div v-for="row in lData" :key="'row-' + row" class="rack-row">
                  <div v-for="col in wData" :key="'col-' + col" class="rack-cell" :class="[getCellClass(row, col),getIsActived(row, col)?'selected':'']" @click="selectCell(row, col)">
                    <span class="cell-label">{{ row }}{{ col }}</span>
                  </div>
                </div>
              </div>
            </div>
          </Pane>
          <Pane size="45">
            <el-tabs v-model="activeName" type="card">
              <el-tab-pane label="当前在库样本信息" name="first">
                <el-scrollbar>
                  <div class='box'>
                    <el-descriptions title="" :column="2" size="small" border class="padding-lr-sm">
                      <el-descriptions-item width="40px" label="检验日期">{{ selectInfo.sampleda  ? selectInfo.sampleda : '无'}}</el-descriptions-item>
                      <el-descriptions-item width="40px" label="报告单元">{{ selectInfo.rptGroup  ? selectInfo.rptGroup : '无'}}</el-descriptions-item>
                      <el-descriptions-item width="40px" label="标本号">{{ selectInfo.sampleNo  ? selectInfo.sampleNo : '无'}}</el-descriptions-item>
                      <el-descriptions-item width="40px" label="条码号">{{ selectInfo.reqNo  ? selectInfo.reqNo : '无'}}</el-descriptions-item>
                      <el-descriptions-item width="40px" label="病历号"> {{selectInfo.patNo ? selectInfo.patNo : '无'}}</el-descriptions-item>
                      <el-descriptions-item width="40px" label="姓名"> {{selectInfo.patNa ? selectInfo.patNa : '无'}}</el-descriptions-item>
                      <el-descriptions-item width="40px" label="性别"> {{selectInfo.sex ? (selectInfo.sex == '1' ? '男': '女') : '无'}}</el-descriptions-item>
                      <el-descriptions-item width="40px" label="年龄"> {{selectInfo.age ? selectInfo.age : '无'}}</el-descriptions-item>
                      <el-descriptions-item width="40px" label="床号"> {{selectInfo.bedNo ? selectInfo.bedNo : '无'}}</el-descriptions-item>
                      <el-descriptions-item width="40px" label="检验医师">{{ selectInfo.testDoctorNa  ? selectInfo.testDoctorNa : '无'}}</el-descriptions-item>
                      <el-descriptions-item width="40px" label="审核医师">{{ selectInfo.chkDoctorNa  ? selectInfo.chkDoctorNa : '无'}}</el-descriptions-item>
                      <el-descriptions-item width="40px" label="申请项目"> {{selectInfo.reqPurpose ? selectInfo.reqPurpose : '无'}}</el-descriptions-item>
                      <el-descriptions-item width="40px" label="申请人"> {{selectInfo.reqDoctorNa ? selectInfo.reqDoctorNa : '无'}}</el-descriptions-item>
                      <el-descriptions-item width="40px" label="申请时间"> {{ selectInfo.reqTime ? selectInfo.reqTime : '无' }}</el-descriptions-item>
                      <el-descriptions-item width="40px" label="签收人"> {{ selectInfo.signerNa ? selectInfo.signerNa : '无' }}</el-descriptions-item>
                      <el-descriptions-item width="40px" label="签收时间"> {{ selectInfo.signTime ? selectInfo.signTime : '无' }}</el-descriptions-item>
                      <el-descriptions-item width="40px" label="采样人"> {{ selectInfo.samplingDoctorNa ? selectInfo.samplingDoctorNa : '无' }}</el-descriptions-item>
                      <el-descriptions-item width="40px" label="采样时间"> {{ selectInfo.samplingTime ? selectInfo.samplingTime : '无' }}</el-descriptions-item>
<!--                      <el-descriptions-item width="40px" label="送出人"> {{ selectInfo.samplingDoctorNa ? selectInfo.samplingDoctorNa : '无' }}</el-descriptions-item>
                      <el-descriptions-item width="40px" label="送出时间"> {{ selectInfo.samplingTime ? selectInfo.samplingTime : '无' }}</el-descriptions-item>
                      <el-descriptions-item width="40px" label="送达人"> {{ selectInfo.samplingDoctorNa ? selectInfo.samplingDoctorNa : '无' }}</el-descriptions-item>
                      <el-descriptions-item width="40px" label="送达时间"> {{ selectInfo.samplingTime ? selectInfo.samplingTime : '无' }}</el-descriptions-item>-->
                    </el-descriptions>
                  </div>
                  <div class="padding">
                    <el-tabs v-model="activeDownName" type="card" class="demo-tabs">
                      <el-tab-pane label="流程信息" name="firstData">
                        <el-scrollbar style="height:calc(100% - 21px);">
                          <div class="padding">
                            <el-card class="shadow padding-tb" v-if="stepList.length>0">
                              <div class="timelineBox">
                                <TimeLineCompV1 :items="stepList" direction="horizontal" :isShowContent="false" />
                              </div>
                            </el-card>
                          </div>
                        </el-scrollbar>
                      </el-tab-pane>
                      <el-tab-pane label="闭环信息" name="secondData">
                        <el-scrollbar style="height:calc(100% - 21px);">
                          <div class="padding">
                            <el-card class="shadow padding-tb" v-if="closedLoopList.length>0">
                              <div class="timelineBox">
                                <TimeLineCompV1 :items="closedLoopList" direction="horizontal" :isShowContent="false" />
                              </div>
                            </el-card>
                          </div>
                        </el-scrollbar>
                      </el-tab-pane>
                      <el-tab-pane label="TAT信息" name="thirdData">
                        <el-scrollbar style="height:calc(100% - 21px);">
                          <div class="padding">
                            <el-card class="shadow padding-tb" v-if="tatNodeList.length>0">
                              <div class="timelineBox">
                                <TimeLineCompV1 :items="tatNodeList" direction="horizontal" />
                              </div>
                            </el-card>
                          </div>
                        </el-scrollbar>
                      </el-tab-pane>
                    </el-tabs>
                  </div>

                </el-scrollbar>
              </el-tab-pane>
              <el-tab-pane label="历史样本留样信息" name="second">
                <Splitpanes horizontal>
                  <Pane size="50">
                    <vxe-table ref="historyTable" :loading="loading" :data="historyDataList" height="auto" @current-change="rowClick" :row-config="{isCurrent:true}">
                      <vxe-column type="seq" width="30"></vxe-column>
                      <vxe-column field="sampleda" title="检验日期" width="100px">
                        <template #default="{ row }">
                          <span>{{ row.labMaininfoList[0]  ? row.labMaininfoList[0].sampleda : '' }}</span>
                        </template>
                      </vxe-column>
                      <vxe-column field="rptGroup" title="报告单元" width="100px">
                        <template #default="{ row }">
                          <span>{{ row.labMaininfoList[0]  ? row.labMaininfoList[0].rptGroup : '' }}</span>
                        </template>
                      </vxe-column>
                      <vxe-column field="sampleNo" title="标本号" width="80px">
                        <template #default="{ row }">
                          <span>{{ row.labMaininfoList[0]  ? row.labMaininfoList[0].sampleNo : '' }}</span>
                        </template>
                      </vxe-column>
                      <vxe-column field="reqNo" title="条码号" width="80px"></vxe-column>
                      <vxe-column field="patNo" title="病历号" width="80px"></vxe-column>
                      <vxe-column field="patNa" title="姓名" width="80px"></vxe-column>
                      <vxe-column field="sex" title="性别" width="80px">
                        <template #default="{ row }">
                          <span>{{ row.sex ? (row.sex == '1' ? '男': '女') : '无' }}</span>
                        </template>
                      </vxe-column>
                      <vxe-column field="age" title="年龄" width="80px"></vxe-column>
                      <vxe-column field="bedNo" title="床号" width="80px"></vxe-column>
                      <vxe-column field="testDoctorNa" title="检验医师" width="80px">
                        <template #default="{ row }">
                          <span>{{ row.labMaininfoList[0]  ? row.labMaininfoList[0].testDoctorNa : '' }}</span>
                        </template>
                      </vxe-column>
                      <vxe-column field="chkDoctorNa" title="审核医师" width="80px">
                        <template #default="{ row }">
                          <span>{{ row.labMaininfoList[0]  ? row.labMaininfoList[0].chkDoctorNa : '' }}</span>
                        </template>
                      </vxe-column>
                      <vxe-column field="reqPurpose" title="申请项目" width="180px"></vxe-column>
                      <vxe-column field="reqDoctorNa" title="申请人" width="80px"></vxe-column>
                      <vxe-column field="reqTime" title="申请时间" width="80px"></vxe-column>
                      <vxe-column field="signerNa" title="签收人" width="80px"></vxe-column>
                      <vxe-column field="signTime" title="签收时间" width="80px"></vxe-column>
                      <vxe-column field="samplingDoctorNa" title="采样人" width="80px"></vxe-column>
                      <vxe-column field="samplingTime" title="采样时间" width="80px"></vxe-column>
<!--                      <vxe-column field="f19" title="送出人" width="80px"></vxe-column>
                      <vxe-column field="f20" title="送出时间" width="80px"></vxe-column>
                      <vxe-column field="f21" title="送达人" width="80px"></vxe-column>
                      <vxe-column field="f22" title="送达时间" width="80px"></vxe-column>-->
                    </vxe-table>
                  </Pane>
                  <Pane size="50">
                    <el-tabs v-model="hisactiveDownName" type="card" class="demo-tabs">
                      <el-tab-pane label="流程信息" name="hisfirstData">
                        <el-scrollbar style="height:calc(100% - 21px);">
                          <div class="padding">
                            <el-card class="shadow padding-tb" v-if="hisstepList.length>0">
                              <div class="timelineBox">
                                <TimeLineCompV1 :items="hisstepList" direction="horizontal" :isShowContent="false" />
                              </div>
                            </el-card>
                          </div>
                        </el-scrollbar>
                      </el-tab-pane>
                      <el-tab-pane label="闭环信息" name="hissecondData">
                        <el-scrollbar style="height:calc(100% - 21px);">
                          <div class="padding">
                            <el-card class="shadow padding-tb" v-if="hisclosedLoopList.length>0">
                              <div class="timelineBox">
                                <TimeLineCompV1 :items="hisclosedLoopList" direction="horizontal" :isShowContent="false" />
                              </div>
                            </el-card>
                          </div>
                        </el-scrollbar>
                      </el-tab-pane>
                      <el-tab-pane label="TAT信息" name="histhirdData">
                        <el-scrollbar style="height:calc(100% - 21px);">
                          <div class="padding">
                            <el-card class="shadow padding-tb" v-if="histatNodeList.length>0">
                              <div class="timelineBox">
                                <TimeLineCompV1 :items="histatNodeList" direction="horizontal" />
                              </div>
                            </el-card>
                          </div>
                        </el-scrollbar>
                      </el-tab-pane>
                    </el-tabs>
                  </Pane>
                </Splitpanes>
              </el-tab-pane>
            </el-tabs>
          </Pane>
        </Splitpanes>
      </template>
      <template #footer>
        <div class="flex justify-end">
          <el-button type="primary" v-loading="showLoading" @click="dialogFormVisible=false">确定</el-button>
        </div>
      </template>
    </vxe-modal>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, getCurrentInstance, watch, onMounted } from 'vue';
import { pageSizes, DateToString, formatDateTime, IsEmpty } from '@/utils/common';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import { VXETable } from 'vxe-table';
import XEUtils from 'xe-utils';
import { AppStore } from '@/stores/store';//'../../../stores/store';
import axios from 'axios';
import SelectDataList from '@/components/SelectDataList.vue';
import VxePulldownSelection from '@/components/VxePulldownSelection.vue';
import { getOptionValueByCodeRptGroupOption } from '@/utils/SysOptionsHelper';
import { Splitpanes, Pane } from 'splitpanes';
import TimeLineCompV1 from '@/components/TimeLineCompV1.vue';

// 全局变量定义区 ==========
interface Cell {
  row: String;
  col: String;
  status: CellStatus;
  reqNo: String;
  specboxOrderId: String;

}
// 初始状态
const cells = ref<Cell[]>([]);
type CellStatus = 'empty' | 'occupied' | 'unoccupied' | 'selected' | 'borrowed';
let { proxy }: any = getCurrentInstance();
let store = AppStore();
let showLoading = ref(false);
let formData = reactive({
  reqNo: ''
});
let lData = reactive([]);
let wData = reactive([]);
const selectInfo = reactive({});
let dialogFormVisible = ref(false);
const activeName = ref('first')
const activeDownName = ref('firstData')
const hisactiveDownName = ref('hisfirstData')
let stepList = reactive([]); //跟踪记录对象
let hisstepList = reactive([]); //跟踪记录对象
let tatNodeList = reactive([]);/**tat接待你信息列表 */
let histatNodeList = reactive([]);/**tat接待你信息列表 */
let closedLoopList = reactive([]);/**闭环节点信息列表 */
let hisclosedLoopList = reactive([]);/**闭环节点信息列表 */
let historyDataList = reactive([]);/**闭环节点信息列表 */
let props = defineProps({
  isLocall: String, //是否存储到本地
  IsShow: Boolean,
  origin: Number //来源，弹框在哪个地方打开的。1:快捷菜单,2:批次审核
}) as any;

let dataForm = reactive({
  stoPidName:'',
  stoPid:'',
  stoName:'',
  stoId:'',
  fridge:'',
  layer:'',
  specbox:'',
});

defineExpose({
  initPage
})

/**接收父组件传过来的弹框展开状态
 * @param triggerSource 
 */
function initPage(specbox: any) {
  dataForm.stoPidName=specbox.stoPidName;
  dataForm.stoPid=specbox.stoPid;
  dataForm.stoName=specbox.stoName;
  dataForm.stoId=specbox.stoId;
  dataForm.fridge=specbox.fridge;
  dataForm.layer=specbox.layer;
  dataForm.specbox=specbox.specbox;
  lData.length=0;
  wData.length=0;
  cells.value.length=0;

  lData.push(...specbox.orderData.orderColumns);
  wData.push(...specbox.orderData.orderRows);
  const specboxOrders=specbox.orderData.specboxOrders;

  for (let row = 0; row < lData.length; row++) {
    for (let col = 0; col < wData.length; col++) {
      //添加集合遍历
      const data ={
        row: lData[row],
        col: `${wData[col]}`,
        status: 'empty', // 初始状态为空位
        isactived: false,
        reqNo: '',
        specboxOrderId: '',
      }
      cells.value.push(data);
    }
  }
  //动态塞入样本盒id和仓位id
  for (const val of cells.value) {
    for (const val1 of specboxOrders) {
      if (val.row+val.col==val1.orderNumber && val1.empty == 1){
        val.status='occupied';
        val.reqNo=val1.reqNo;
        val.specboxOrderId=val1.id;
      }
    }
  }
  dialogFormVisible.value = true;
}

//   //#region  变量
let loading = ref(false);

// 获取单元格状态
const getCellClass = (row: string, col: string) => {
  const cell = cells.value.find(cell => `${cell.row}` === `${row}` && `${cell.col}` === `${col}`);
  return cell ? cell.status : 'empty';
};
const getIsActived = (row: string, col: string) => {
  const cell = cells.value.find(cell => `${cell.row}` === `${row}` && `${cell.col}` === `${col}`);
  return cell && cell.isactived ? true : false;
};
// 点击选择状态
const selectCell = (row: String, col: String) => {
  cells.value.forEach((m) => {
    m.isactived = false;
  });
  const cell = cells.value.find(cell => cell.row === row && `${cell.col}` === `${col}`);
  cell.isactived = true;
  hisstepList.length = 0;
  histatNodeList.length = 0;
  hisclosedLoopList.length = 0;
  getHisReqNoList(cell.specboxOrderId);
  if (!IsEmpty(cell.reqNo)){
    getReqNoData(cell.reqNo);
    getTraceRecList(cell);
    findLabReqMainClosedLoopInfo(cell);
    findLabReqMainTatInfo(cell);
  }else {
    clearSelectInfo();
  }

};
//清空数据
function clearSelectInfo(){
  historyDataList.length=0;
  stepList.length = 0;
  closedLoopList.length = 0;
  tatNodeList.length = 0;

  selectInfo.sampleda='';
  selectInfo.rptGroup='';
  selectInfo.sampleNo='';
  selectInfo.testDoctorNa='';
  selectInfo.chkDoctorNa='';
  selectInfo.reqNo='';
  selectInfo.patNa='';
  selectInfo.sex='';
  selectInfo.age='';
  selectInfo.bedNo='';
  selectInfo.reqPurpose='';
  selectInfo.reqDoctorNa='';
  selectInfo.reqTime='';
  selectInfo.signerNa='';
  selectInfo.signTime='';
  selectInfo.samplingDoctorNa='';
  selectInfo.samplingTime='';
}
//根据reqNo获取数据
function getReqNoData(reqNo:any){
  const url = '/api/samsto/specboxOrderReq/getReqData';
  proxy.$http
      .get(url, {params: { reqNo: reqNo }
      })
      .then((res: any) => {
        const labMainInfo=res.data.labMaininfoList[0];
        selectInfo.sampleda=labMainInfo.sampleda;
        selectInfo.rptGroup=labMainInfo.rptGroup;
        selectInfo.sampleNo=labMainInfo.sampleNo;
        selectInfo.testDoctorNa=labMainInfo.testDoctorNa;
        selectInfo.chkDoctorNa=labMainInfo.chkDoctorNa;
        selectInfo.reqNo=res.data.reqNo;
        selectInfo.patNa=res.data.patNa;
        selectInfo.sex=res.data.sex;
        selectInfo.age=res.data.age;
        selectInfo.bedNo=res.data.bedNo;
        selectInfo.reqPurpose=res.data.reqPurpose;
        selectInfo.reqDoctorNa=res.data.reqDoctorNa;
        selectInfo.reqTime=res.data.reqTime;
        selectInfo.signerNa=res.data.signerNa;
        selectInfo.signTime=res.data.signTime;
        selectInfo.samplingDoctorNa=res.data.samplingDoctorNa;
        selectInfo.samplingTime=res.data.samplingTime;
      });
}

//根据空位id获取历史数据
function getHisReqNoList(specboxOrderId :any){
  loading.value=true;
  historyDataList.length=0;
  const url = '/api/samsto/specboxOrderReq/getHisReqNoList';
  proxy.$http
      .get(url, {params: { specboxOrderId: specboxOrderId }
      })
      .then((res: any) => {
        historyDataList.push(...res.data)
        if (historyDataList.length>0){
          //获取流程信息
          rowClick({ row: historyDataList[0], rowIndex: 0 });
        }
        loading.value=false;
      });
}
// 行点击事件
function rowClick({ row, rowIndex }) {
  if (IsEmpty(row)) {
    return;
  }
  (proxy.$refs.historyTable as any).setCurrentRow(row);
  getHisTraceRecList(row);
  findHisLabReqMainClosedLoopInfo(row);
  findHisLabReqMainTatInfo(row);
}
// 获取跟踪记录
function getTraceRecList({ row }) {
  stepList.length = 0;

  const url = '/lab/mainState/getTraceRecTwoList';
  proxy.$http
      //注意此处的数据条数
      .get(url, {
        params: { reqNo: row.reqNo }
      })
      .then((res: any) => {

        res.data.forEach(e => {
          const m = { title: e.stateName, timestamp: e.operateTime, acter: e.operator, content: e.remark };
          stepList.push(m);
        });
      })
      .catch((err: any) => {
        proxy.$alert('获取流程节点失败', '提示');
      });
}
function getHisTraceRecList(row :any) {
  hisstepList.length = 0;

  const url = '/lab/mainState/getTraceRecTwoList';
  proxy.$http
      //注意此处的数据条数
      .get(url, {
        params: { reqNo: row.reqNo }
      })
      .then((res: any) => {

        res.data.forEach(e => {
          const m = { title: e.stateName, timestamp: e.operateTime, acter: e.operator, content: e.remark };
          hisstepList.push(m);
        });
      })
      .catch((err: any) => {
        proxy.$alert('获取流程节点失败', '提示');
      });
}

/**加载闭环展示 */
function findLabReqMainClosedLoopInfo({ row }) {
  closedLoopList.length = 0;
  const url = '/lab/reqMain/findLabReqMainClosedLoopInfo';
  proxy.$http
      //注意此处的数据条数
      .get(url, {
        params: { reqNo: row.reqNo }
      })
      .then((res: any) => {
        res.data.forEach(e => {
          e.acter = '管理员';
        });
        Object.assign(closedLoopList, res.data);
      })
      .catch((err: any) => {
        proxy.$alert('获取流程节点失败', '提示');
      });
}
function findHisLabReqMainClosedLoopInfo(row :any) {
  hisclosedLoopList.length = 0;
  const url = '/lab/reqMain/findLabReqMainClosedLoopInfo';
  proxy.$http
      //注意此处的数据条数
      .get(url, {
        params: { reqNo: row.reqNo }
      })
      .then((res: any) => {
        res.data.forEach(e => {
          e.acter = '管理员';
        });
        Object.assign(hisclosedLoopList, res.data);
      })
      .catch((err: any) => {
        proxy.$alert('获取流程节点失败', '提示');
      });
}
/**加载TAT 节点展示 */
function findLabReqMainTatInfo({ row }) {
  tatNodeList.length = 0;
  const url = '/lab/reqMain/findLabReqMainTatInfo';
  proxy.$http
      //注意此处的数据条数
      .get(url, {
        params: { reqNo: row.reqNo }
      })
      .then((res: any) => {
        Object.assign(tatNodeList, res.data);
      })
      .catch((err: any) => {
        proxy.$alert('获取流程节点失败', '提示');
      });
}
function findHisLabReqMainTatInfo(row :any) {
  histatNodeList.length = 0;
  const url = '/lab/reqMain/findLabReqMainTatInfo';
  proxy.$http
      //注意此处的数据条数
      .get(url, {
        params: { reqNo: row.reqNo }
      })
      .then((res: any) => {
        Object.assign(histatNodeList, res.data);
      })
      .catch((err: any) => {
        proxy.$alert('获取流程节点失败', '提示');
      });
}


</script>
<style lang="scss" scoped>
#pagepanelname {
  .tool {
    margin: 10px 15px;

    .el-row {
      .tool-left,
      .tool-right {
        background-color: bg-white;
      }

      .el-form-item {
        margin-top: 10px;
        margin-bottom: 10px;
      }
    }
  }

  .el-divider--vertical {
    height: 20px;
  }
}

:deep(.el-tabs) {
  height: 100%;
}

:deep(.el-tab-pane) {
  height: 100%;
}

:deep(.el-tabs__content) {
  height: calc(100% - 58px);
}

.sample-box {
  width: 100%;
  height: auto;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.rack {
  display: flex;
  flex-direction: column;
  border: 2px solid #eee;
  border-radius: 5px;
}

.rack-row {
  display: flex;
  justify-content: center;
}

.rack-cell {
  width: 40px;
  height: 40px;
  margin: 3px;
  border-radius: 50%;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.rack-cell.empty {
  background-color: #e0e0e0; /* 空位 */
}

.rack-cell.waitOccupied {
  background-color: #ff6347; /* 待占用（粉色） */

}
.rack-cell.occupied {
  background-color: #f80707; /* 已占用（红色） */
}

.rack-cell.unoccupied {
  background-color: #32cd32; /* 未占用（绿色） */
}

.rack-cell.selected {
  background-color: #1e90ff; /* 选中（蓝色） */
}

.rack-cell.borrowed {
  background-color: #ffeb3b; /* 借出（黄色） */
}

.cell-label {
  font-size: 10px;
  color: #333;
  text-align: center;
  pointer-events: none;
}

.box {
  /* 父容器设置宽度, 并超出部分不显示*/
  width: 100%;
  display: inline-block;
}
.el-descriptions__cell .el-descriptions__label {
  width: 40px;
}
.cell-item {
  width: 80px;
}
.el-descriptions__content {
  .el-check-tag {
    margin-right: 10px;
    font-size: 16px;
    margin-bottom: 6px;
  }
}
</style>
